<template>
    <div class="icon-select" ref="iconSelectRef">
        <a-popover 
            placement="bottom" 
            title="搜素字体图标" 
            trigger="click" 
            :getPopupContainer="()=>$refs.iconSelectRef"
            @openChange="(val:boolean)=>{
                if(!val) {
                    state.icons = []
                }else {
                    initIcons()
                }
            }"
        >
            <template #content>
                <div class="list">
                    <template v-if="state.loading">
                        <Loading2/>
                    </template>
                    <template v-else>
                        <a-empty v-if="state.icons.length==0"/>
                        <template v-else>
                            <div class="item" v-for="item in state.icons" :key="item" @click="selectIcon(item)">
                                <Icon :icon="item"/>
                            </div>
                        </template>
                    </template>
                </div>
            </template>
            <a-input :value="modelValue" @input="onInput">
                <template #prefix>
                    <HomeOutlined />
                </template>
            </a-input>
        </a-popover>
    </div>
</template>

<script setup lang="ts">
import Icon from '@/components/Iconify/index.vue'
import { reactive,onMounted,ref } from 'vue';
import axios from 'axios';
import Loading2 from '@/components/loading/loading2.vue';
import { debounce } from 'lodash';

const props = withDefaults(defineProps<{
    modelValue?:string
}>(),{})
const emits = defineEmits<{
    (e:"update:modelValue",value:string):void
}>()

const iconSelectRef = ref()
const state = reactive({
    url:"https://api.iconify.design/collections",
    url2:"https://api.iconify.design/search",
    icons:[],
    loading:false
})



const onInput = (e:any)=>{
    emits('update:modelValue',e.target.value) 
    // initIcons()
    debouncedSearch()
}

const initIcons = async ()=>{
    state.loading = true
    if(!props.modelValue){ //搜索全部列表
        const res =  await axios({
            url:state.url,
            method:"GET",
            params:{
                prefixes:props.modelValue
            }
        })
        const keys = Object.keys(res.data)
        for (let i = 0; i < keys.length; i++) {
            const key:string = keys[i];
            const samples:any[] = res.data[key].samples
            samples.forEach((i:string)=>{
                state.icons.push(key + ":" +  i)
            })
        }
    }else {
        const res =  await axios({
            url:state.url2,
            method:"GET",
            params:{
                query:props.modelValue
            }
        })
        state.icons = res.data.icons
    }
    state.loading = false
}

const debouncedSearch = debounce(initIcons, 500) 

const selectIcon = (icon:string)=>{
    emits('update:modelValue',icon)
}

onMounted(()=>{
    initIcons()
})
</script>

<style lang="scss" scoped>
.icon-select {
    position: relative; 
}
:deep(.ant-popover){
    width: 100%;
    top: 20px !important;
    left: 0!important;
    z-index: 9999;
    .ant-popover-content {
        width: 100%;  
    }
    .ant-popover-inner {
        width: 100%;  
    }
    .list{
        border-top: 1px solid #e8e8e8;
        height: 200px;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        .item{
            width: 25%;
            height: 50px;
            cursor: pointer;
            &:hover{
                background-color: #f5f5f5;
            }
        }
        &::-webkit-scrollbar {
            width: 6px;
            background: transparent;
            opacity: 0;
            transition: opacity 0.3s;
        }
        &:hover::-webkit-scrollbar {
            opacity: 1;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            border-radius: 4px;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background-color: transparent;
        }
        &:hover::-webkit-scrollbar-thumb {
            background-color: #a19e9e;
            &:hover {
                background-color: #ccc;
            }
        }
    }
}
</style>